<template>
  <div v-if="childrenList">
    <div class="comment-text">
      <div
        class="user-comment"
        v-for="(item, index) in childrenList"
        :key="index"
      >
        <div class="user-comment-top">
          <img v-if="item.userinfo.user_img" :src="item.userinfo.user_img" />
          <img v-else src="@/assets/default_img.jpg" />
          <span v-if="temp"
            >{{ item.userinfo.name }} {{ item.comment_date }}</span
          >
        </div>
        <div class="user-comment-bottom">
          <span v-if="temp"
            >回复给<span style="color: blue">{{
              item.parent_user_info.name
            }}</span>
            <!-- 三+级评论 -->
            <!-- 三+级评论，和之前的不一样 -->
            <span class="com_user" @click="com3nClick(item.comment_id)">
              回复3</span
            >
          </span>
          <!-- 二级评论 -->
          <span v-else
            >回复给<span style="color: blue" v-if="temp">{{
              item.parent_user_info.name
            }}</span>
            {{ item.comment_content
            }}<span class="com_user" @click="comClick(item.comment_id)">
              回复2</span
            >
          </span>
        </div>
        <!-- 三级评论 -->
        <!-- temp为true说明是三级以上 -->
        <div>
          <!-- 2.父级接受 -->
          <comment-children-self
            :childrenList="item.childrenList"
            :temp="true"
          ></comment-children-self>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "commentChildrenSelf",
  props: {
    childrenList: {
      type: Array,
    },
    temp: {
      type: Boolean,
    },
  },
  methods: {
    comClick(comment_id) {
      // console.log(comment_id);
      this.$emit("comClick", comment_id);
      // this.$refs.commentText
    },
    com3nClick(comment_id) {
      this.$store.dispatch("setComment_id1", comment_id);
      this.$store.dispatch("setFocusTrue1");
      // console.log(this.$store.state);
    },
  },
};
</script>

<style lang="less" scoped>
.user-comment {
  padding: 1.389vw 0vw;
  border-bottom: 0.278vw solid #f4f4f4;
}
.user-comment-top {
  margin-right: 2.778vw;

  display: flex;
  flex-wrap: nowrap;
  img {
    width: 6.944vw;
    height: 6.944vw;
    border-radius: 6.944vw;
  }
  span {
    display: flex;
    align-items: center;
    padding-left: 2.778vw;
  }
}
.user-comment-bottom {
  //   margin-left: 11.111vw;
  display: flex;
  flex-wrap: wrap;
  span {
    padding-right: 10px;
  }
}
.comment-items {
  padding-left: 11.111vw;
}
.comment_self {
  padding-left: 4.167vw;
}
.com_user {
  color: #6ddd99;
}
</style>